<!--
 * @Description:  差标配置
 * @Version: 2.0
 * @Autor: 许国辉
 * @Date: 2022-12-03 14:11:38
 * @LastEditors: 许国辉
 * @LastEditTime: 2022-12-05 22:33:34
-->
<template>
  <PageWrapper title="说明">
    <template #headerContent>
      <div>
        <span class="flex-1">
          请根据实际差旅标准进行差标配置，防止出现由于差标无法出行的情况。
        </span>
      </div>
    </template>

    <div style="background-color: white; width: 100%; padding: 10px; font-size: 15px">
      <a-row>
        <a-col span="4" style="text-align: center">
          <div style="background-color: #f0f0f0; margin: 0px 3px">
            <div style="padding-top: 12px">
              <span style="font-size: 16px; font-weight: 600">所内员工职务</span>
            </div>
            <div style="padding: 0px 8px"><a-divider style="margin: 12px 0px" /></div>

            <div>
              <a-radio-group
                name="radioGroup"
                button-style="solid"
                v-model:value="employeeLeaveValue"
                @change="(ev) => handleRadioChange(ev)"
              >
                <a-radio-button
                  :style="radioStyle"
                  v-for="(value, index) in employeeLeaveList"
                  :key="index"
                  :value="value.id"
                >
                  {{ value.leaveName }}
                </a-radio-button>
              </a-radio-group>
            </div>
          </div>
        </a-col>
        <a-col span="20">
          <div style="margin: 0px 6px">
            <div style="padding-top: 12px">
              <span style="padding-left: 8px; font-size: 16px; font-weight: 600"
                >酒店预定差旅标准</span
              >
            </div>
            <a-divider style="margin: 12px 0px" />
            <TravelCriterionHotelSet :employeeLeave="employeeLeaveValue" />
          </div>
        </a-col>
      </a-row>
    </div>
  </PageWrapper>
</template>
<script lang="ts">
  import { defineComponent, onMounted, reactive, ref } from 'vue';
  import { getEmployeeLeaves } from '/@/api/baseInfo/employeeLeaveAPI';
  import { EmployeeLeaveModel } from '/@/api/baseInfo/model/employeeLeave';
  import { PageWrapper } from '/@/components/Page';
  import TravelCriterionHotelSet from './components/travelCriterionHotelSet.vue';

  export default defineComponent({
    components: { PageWrapper, TravelCriterionHotelSet },
    setup() {
      const employeeLeaveValue = ref(1);
      const employeeLeaveList = ref(Array<EmployeeLeaveModel>());
      const getEmployeeLeaveList = async () => {
        await getEmployeeLeaves()
          .then((data) => {
            //处理成功后的逻辑
            employeeLeaveList.value = data; //这个data 是接收的resolve参数--
            employeeLeaveValue.value = employeeLeaveList.value[0].id;
          })
          .catch((err) => {
            console.log(err);
          });
      };

      const handleRadioChange = (e) => {
        // employeeLeaveValue.value =
        console.log(e);
      };

      const radioStyle = reactive({
        margin: '8px 0px',
        display: 'block',
        height: '32px',
        lineHeight: '32px',
      });

      onMounted(() => {
        getEmployeeLeaveList();
      });
      return {
        employeeLeaveValue,
        employeeLeaveList,
        handleRadioChange,
        radioStyle,
      };
    },
  });
</script>
